[Rails] HAML介紹

這二天接觸到haml這個輕量級語言，在嘗試後發覺真的是很方便的語言，可以用更優雅的方式撰寫前端的template

以下做個整理

首先得安裝gem

gem "haml"

> bundle install

HAML必須將.erb檔案改為.haml，如app/views/docs/index.html.erb改為app/views/docs/index.html.haml

基本的轉換規則如下：

1. html的tag改用％代替，例如<header>改為％header，不需要close tage
2. class attribute改用.，例如<div class="nav">改為.nav
3. id attribute改用＃，例如<div class="banner" id="message">改為.banner#message
4. 遇到<%= ...>的代碼改用＝，例如<= f.input>改為= f.input

舉例：

show.html.erb

<div class="wrapper_with_padding>
	<div id="doc_show">
		<h1><%= @doc.title %></h1>
    	<p><%= simple_format(@doc.content) %>
    
    	<div class="buttons">
    		<%= link_to "Fix Doc", edit_doc_path(@doc), class: "button" %>
    	  <%= link_to "Delete Doc", doc_path(@doc), method: :delete, data: {confirm: "Are you sure?"}, class: "button" %>
   	 	</div>
	</div>
</div>

show.html.haml

.wrapper_with_padding
  #doc_show
    %h1= @doc.title
    %p= simple_format(@doc.content)

    .buttons
      = link_to "Fix Doc", edit_doc_path(@doc), class: "button"
      = link_to "Delete It", doc_path(@doc), method: :delete, data: {confirm: "Are you sure?"}, class: "button"

參考資料：
haml官網教材
haml refrence